<template>
  <div>
    <div>
      <div>
        <van-nav-bar style="margin:3%;"
                     class="dz-dh"
                     title="瑜伽练习"
                     left-text="返回"
                     left-arrow
                     @click-left="onClickLeft"
        />
      </div>
      <div>
        <div style="text-align: left;">
          <van-cell title-style="font-size:20px" title="累计瑜伽练习>" icon="manager-o"/>
        </div>
        <div style="text-align: left;margin-left: 20px;">
          <label style="font-weight: bold;font-size: 50px">{{ time }}</label>
          <label>分钟</label>
          <van-icon name="award"/>
          {{ msg }}
        </div>
        <div style="margin-top: 10px ">
          <van-progress percentage="1"/>
        </div>
        <div style="margin: 3%;"><label>再坚持</label>
          <label style="color: blue">{{ num1 }}</label>
          <label>分钟即可达成新成就</label></div>
      </div>
      <div style="text-align: left;margin-left: 20px;margin-top: 20px;width: 100%">
        <p style="font-size: 20px;font-weight: bold">最近的瑜伽练习</p>
        <p style="margin-left: 50px">添加瑜伽练习后，可以在这里快速开始</p>
      </div>

      <div style="width: 40%;margin-left: 30%;margin-right: 30%" >
        <van-button round color="#7232dd" size="large" @click="tz()">添加瑜伽练习</van-button>
      </div>
    </div>
    <!--          1.4 瑜伽推荐-->
    <div class="sy-tj-gd">
      <van-row>
        <van-col span="7" style="font-size: 20px;font-weight: bold;">瑜伽课程</van-col>
        <van-col span="10"></van-col>
        <van-col span="7">
          <van-button round>查看更多</van-button>
        </van-col>
      </van-row>
    </div>
    <!--          1.5 瑜伽详情-->
    <div v-for="imgs in yogaInfo" :key="imgs">
      <div class="sy-tj-hd" >
        <div class="sy-tj-hd-tp">
          <img :src="imgs.imgurl" class="sy-tj-imgs">
        </div>
        <div class="sy-tj-hd-xq">
          <label style="font-size: 18px;font-weight: bold;">{{ imgs.title }}</label>
          <p>{{ imgs.info }}</p>
        </div>
      </div>
    </div>
    <!--    人气计划课程-->
    <div class="sy-tj-gd">
      <van-row>
        <van-col span="7" style="font-size: 20px;font-weight: bold;">人气计划</van-col>
        <van-col span="10"></van-col>
        <van-col span="7">
          <van-button round>查看更多</van-button>
        </van-col>
      </van-row>
    </div>
    <!--    课程详情-->
    <div v-for="imgs in ActivityInfo" :key="imgs">
      <div class="sy-tj-hd">
        <div class="sy-tj-hd-tp">
          <img :src="imgs.img" class="sy-tj-imgs">
        </div>
        <div class="sy-tj-hd-xq">
          <label style="font-size: 18px;font-weight: bold;">{{ imgs.str }}</label>
          <p>{{ imgs.time }}</p>
        </div>
      </div>
    </div>
    <!--    热门课程滚动图片-->
    <div style="margin-top: 10px">
      <div class="sy-tj-gd">
        <van-row>
          <van-col span="7" style="font-size: 20px;font-weight: bold;">热门推荐</van-col>
          <van-col span="10"></van-col>
          <van-col span="7">
            <van-button round>查看更多</van-button>
          </van-col>
        </van-row>
      </div>
      <div class="two">
        <div class="two-images">
          <van-swipe :autoplay="3000" lazy-render>
            <van-swipe-item v-for="image in images" :key="image">
              <img class="sy-lb-tps" :src="image"/>
            </van-swipe-item>
          </van-swipe>
        </div>
      </div>
    </div>
    <!--    商品推荐-->
    <div style="margin-top: 10px">
      <div class="sy-tj-gd">
        <van-row>
          <van-col span="7" style="font-size: 20px;font-weight: bold;">商品推荐</van-col>
          <van-col span="10"></van-col>
          <van-col span="7">
            <van-button round>查看更多</van-button>
          </van-col>
        </van-row>
      </div>
      <div class="sy-sp-xq">
      </div>
      <div class="sp-lx" v-for="s in shop" :key="s">
        <img class="mal-gd-imgs" :src="s.img">
        <div>
          <label class="sp-tp-na">{{ s.name }}</label><br>
          <span style="color: #ee0a24;font-size: 9px">商品价格:{{ s.discount }}</span>
          <span
              style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px;font-size: 9px">{{
              s.price
            }}</span><br>
          <span
              style="color: orangered;font-size: 10px;margin-right: 40px;margin-top: 10px">商品销量:{{
              s.sale
            }}</span>
          <span style="color: #ee0a24">￥{{ s.discount }}</span>
          <span style="color: #8d8c8c;text-decoration: line-through;margin-left: 10px">￥{{ s.price }}</span><br>
          <span style="color: orangered;font-size: 10px;margin-right: 40px">商品销量:{{ s.sale }}</span>
          <span style="color: lightslategrey;font-size: 10px">库存:{{ s.room }}</span>
        </div>
      </div>
    </div>
    <div style="margin-bottom: 14%;float: left;width: 100%"></div>
  </div>
</template>

<script>
export default {
  name: "YogaView",
  data() {
    return {
      yogaInfo:[{
        imgurl: "",
        title:"",
        info:""
      }
      ],
      images: [
        require("../assets/images/yoga1.jpg"),
        require("../assets/images/yoga2.jpg"),
        require("../assets/images/yoga3.jpg"),
        require("../assets/images/yoga4.jpg"),
        require("../assets/images/yoga5.jpg")
      ],
      time: 6,
      msg: "未完成",
      num1: "20",
      //商品信息
      shop: [
        {
          img: "",
          name: "",
          price: "",
          discount: "",
          sale: "",
          room: ""
        }],
      ActivityInfo: [
        {
          img: require("../assets/images/yoga1.jpg"),
          str: "莫奈印象 | 顶级大师专业瑜伽指导",
          time: "报名时间：07.03-07.22"
        },
        {
          img: require("../assets/images/yoga3.jpg"),
          str: "莫奈印象 | 顶级大师专业瑜伽指导",
          time: "报名时间：06.03-06.30"
        },
        {
          img: require("../assets/images/yoga4.jpg"),
          str: "莫奈印象 | 顶级大师专业瑜伽指导",
          time: "报名时间：08.03-08.12"
        },
      ],

    }
  }, mounted() {
    this.axios.get("/api/mall/mall.do?id=" + 3).then(r => {
      if (r.data.code == 200) {
        //console.log(r.data.data)
        this.shop = r.data.data;
      } else {
        this.$toast(r.data.msg);
      }
    }),
        this.axios.get("/api/paln/type.do?type="+2).then(r=>{
          if(r.data.code==200){
            this.yogaInfo=r.data.data;
            //console.log(this.yogaInfo);
          }
        })
  },
  methods: {
    onClickLeft() {
      history.back();
    },
    tz(){
      this.$router.push("/Plan");
    },
  }

}
</script>

<style scoped>

.dz-dh {
  margin-top: 20px;
}

.sp-lx {
  width: 40%;
  border-radius: 5px;
  margin-right: 10px;
  margin-top: 5%;
  margin-left: 5%;
  float: left;
}

.sp-tp-na {
  font-size: 12px;
  font-weight: bold;
}

.mal-gd-imgs {
  width: 100%;
  height: 100%;
  border-radius: 5px;
}

.sy-sp-xq {
  width: 100%;
  float: left;
}

.two {
  height: 300px;
}

.two-images {
  width: 100%;
  float: left;
  height: 300px;
}

.sy-lb-tps {
  width: 90%;
  margin-right: 20px;
  height: 300px;
  border-radius: 20px;
}

.sy-tj-imgs {
  width: 100%;
  height: 100%;
  border-radius: 20px;
  float: left;
}
.sy-tj-hd {
  width: 92%;
  margin-left: 4%;
  margin-right: 4%;
  float: left;
  height: 140px;
}

.sy-tj-hd-tp {
  margin-top: 10px;
  width: 50%;
  height: 120px;
  float: left;
}

.sy-tj-hd-xq {
  margin-top: 10px;
  margin-left: 4%;
  width: 46%;
  height: 100px;
  float: left;
}

.sy-tj-gd {
  width: 100%;
  float: left;
  margin-top: 15px;
}
</style>
